<template>
  <view class="confirm-container">
    <u-navbar title="填写收货信息" :border-bottom="false"></u-navbar>

    <view class="form-wrapper">
      <u-form :model="form" label-width="160rpx" label-align="right">
        <u-form-item label="收件人">
          <u-input v-model="form.receiveName" placeholder="请输入收件人姓名" clearable />
        </u-form-item>

        <u-form-item label="联系电话">
          <u-input v-model="form.receivePhone" placeholder="请输入联系电话" clearable type="number" />
        </u-form-item>

        <u-form-item label="地址">
          <u-input v-model="form.address" placeholder="请输入收货地址" clearable />
        </u-form-item>
      </u-form>

      <u-button type="primary" @click="submitExchange" class="submit-btn">确认兑换</u-button>
    </view>
  </view>
</template>


<script setup lang="ts">
import { ref } from 'vue'
import { exchangeGift } from '../../http/gift'

const form = ref({
  receiveName: '',
  receivePhone: '',
  address: ''
})

const gift = uni.getStorageSync('currentGift')
const studentId = uni.getStorageSync('studentId')

const submitExchange = async () => {
  if (!form.value.receiveName || !form.value.receivePhone || !form.value.address) {
    uni.showToast({ title: '请填写完整信息', icon: 'none' })
    return
  }

  const success = await exchangeGift({
    studentId,
    studentName:gift.studentName,
    giftId: gift.id,
    giftName: gift.name,
    imageUrl: gift.imageUrl,
    point: gift.point,
    ...form.value
  })

  if (success) {
    uni.showToast({ title: '兑换成功' })
    setTimeout(() => {
      uni.navigateBack()
    }, 1000)
  } else {
    uni.showToast({ title: '积分不足或网络异常', icon: 'none' })
  }
}
</script>

<style scoped>
.confirm-container {
  padding: 0;
  background-color: #f7f9fa;
}

.form-wrapper {
  margin: 40rpx 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  padding: 40rpx 30rpx;
}

/* 表单项 */
.u-form-item {
  margin-bottom: 36rpx;
}

.u-form-item__body__left__content__label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.u-input {
  font-size: 28rpx;
  color: #333;
  padding-left: 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 12rpx;
  height: 80rpx;
  transition: border-color 0.3s ease;
}

.u-input:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2rpx rgba(24, 144, 255, 0.3);
}

/* 提交按钮 */
.submit-btn {
  margin-top: 60rpx;
  background: linear-gradient(to right, #ff7d00, #ffac33);
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 125, 0, 0.2);
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 16rpx rgba(255, 125, 0, 0.3);
}
</style>

